<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>搜索信息</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="name" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="orderTable" lay-filter="orderTable"></table>
    </div>
</div>
<script id="fahuo" type="text/html" >
    <div class="layui-panel">
    <form class="layui-form">
        <div class="layui-form-item">
        <label class="layui-form-label">发货</label>
        <div class="layui-input-block">
            <select class="layui-select" name="channel">
                <option>中通快递</option>
                <option>圆通速递</option>
                <option>顺丰速运</option>
                <option>申通快递</option>
                <option>韵达速递</option>
                <option>京东快递</option>
                <option>中国邮政</option>
            </select>
        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">物流单号</label>
            <div class="layui-input-block">
                <input class="layui-input" name="oddNumbers" autocomplete="请输入快递单号">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="display: none">
                <a id="btnFahuo" class="layui-btn layui-btn-normal" lay-filter="btnFahuo" lay-submit="">确认</a>
            </div>
        </div>
    </form>
    </div>
</script>
<script id="tool" type="text/html">

    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="details">详情</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
<!--   -->


</script>
<script id="tableBar" type="text/html">
<!--    <a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">-->
<!--        <i class="layui-icon layui-icon-add-1"></i>-->
<!--        新增-->
<!--    </a>-->
    <!--<a class="layui-btn layui-btn-danger layui-btn-md" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </a>-->
</script>
<script id="switchState" type="text/html">
    <input type="checkbox" name="state" value="{{d.state}}"
           lay-skin="switch" lay-text="是|否" lay-filter="checkstate" {{d.state==0?"checked":""}} />
</script>
<script id="photo" type="text/html">
    {{# if(d.isUpdate==0){ }}
    <img src="/file/fc/showImg/{{d.photoPath}}" style="width: 30px;height: 60px;">
    {{# }}}
</script>
<script>
    var $,date;
    layui.use(['table','form','layer','jquery'],function(){
        var table = layui.table,form = layui.form,
            layer = layui.layer;
             $=layui.jquery;
        //加载表格
        table.render({
            elem:'#orderTable',
            height:'full-160',
            page:true,
            toolbar:'#tableBar',
            url:'/system/oc/find4',
            cols:[
                [
                    {type:'numbers',fixed:'left',style:'height:70px'},
                    {type:'checkbox',fixed:'left'},
                    {field:'member',title:'名称',width:150},
                    {field:'orderTime',title:'下单时间',width:150},
                    {field:'state',title:'订单状态',width:180},
                    {field:'photoPath',title:'头像',width:80,templet: '#photo',align: 'center'},
                    {field:'orderAmount',title:'订单金额',width: 100},
                    {field:'paidinAmount',title:'实付金额',width:100},
                    {field:'aymentTime',title:'支付时间',width:100},
                    {field:'consignee',title:'收货人',width:100},
                    {field:'oddNumbers',title:'物流单号',width:100},
                    {field:'channel',title:'物流渠道',width:100},
                    {fixed:'right',title:'操作',width:200,align:'center',toolbar:'#tool'},
                ]
            ]
        })

        // 监听搜索按钮
        form.on('submit(searchBtn)', function (data) {
            var dataForm = data.field;

            table.reload('orderTable', {
                where: {
                    brandName:dataForm.name
                },
                page:{
                    curr:1
                }
            });
        });

        var active = {
            addOrUpdate:function (content) {
                layer.open({
                    type:1,
                    content:$('#fahuo').html(),
                    area:['500px'],
                    offset:'rt',
                    anim:1,
                    title:'发货',
                    btn:["确定","取消"],
                    move:false,
                    success:function (){
                        form.render();
                    },
                    btn1:function () {
                        $('#btnFahuo').click();

                    },
                    end:function () {
                        layui.table.reload('orderTable');
                    }
                })
            },
            details:function (id) {
                layer.open({
                    type: 2,
                    content:'/page/details/'+id,
                    area: ['600px', '600px'],
                    btn: '取消',
                })
            },
            delete:function (id){
                layer.confirm('确认删除?',function (index){
                $.ajax({
                    type:'post',
                    url:'/system/oc/delete',
                    data: {
                        id:id
                    },
                    dataType: 'json',
                    success:function (result){
                        top.layer.msg(result.msg);
                        layui.table.reload('orderTable');
                    }

                })
                    layer.close(index);
                })

            }
        }
        form.on('submit(btnFahuo)',function (data){

            var dataForm=data.field;
            dataForm.id=date;
            dataForm.state='已发货';
            $.ajax({
                type:'post',
                url:'/system/oc/fahuo',
                data:dataForm,
                dataType:'json',
                success:function (result){
                        top.layer.alert(result.msg);
                        layer.closeAll();
                }
            })
        })

        table.on('toolbar(orderTable)',function (obj) {
            var event = obj.event;
            if("" == event){
                active.addOrUpdate('/page/system/memberAdd');
            }
        })

        table.on('tool(orderTable)',function (obj) {
            var event = obj.event;
             date=obj.data.id;
            if("fahuo" == event){
                active.addOrUpdate(date);
            }
            if("details"==event){

                active.details(date);
            }
            if("delete"==event){
                active.delete(date);
            }
        })

    });

</script>
</body>
</html>
